<template>
  <el-container v-loading="loading">

    <div class="chart-group">
      <div class="title">
        <h3>数据统计</h3>
      </div>
      <div class="charts">
        <el-rows>
          <div class="info-group-block">
            <h3>用户总数</h3>
            <p>{{data.count}}</p>
          </div>
          <div class="info-group-block">
            <h3>性别</h3>
            <p>男：{{data.sex.male}} ， 女：{{data.sex.female}} ， 未知：{{data.count - data.sex.male - data.sex.female}}</p>
          </div>
          <div class="info-group-block">
            <h3>平均用户等级</h3>
            <p>{{data.member_grade}}</p>
          </div>
          <div class="info-group-block">
            <h3>平均用户成长值</h3>
            <p>{{data.member_grow}}</p>
          </div>
        </el-rows>
        <el-rows>
          <div class="info-group-block">
            <h3>绑定手机号数量</h3>
            <p>{{data.phone}}</p>
          </div>
          <div class="info-group-block">
            <h3>性别分布</h3>
            <p>男：{{data.per_male}}% ， 女：{{data.per_female}}%</p>
          </div>
          <div class="info-group-block">
            <h3>绑定手机号比例</h3>
            <p>{{data.per_phone}}%</p>
          </div>
          <div class="info-group-block">
            <h3>会员数量</h3>
            <p>{{data.vip}}</p>
          </div>
        </el-rows>
      </div>
    </div>

    <div class="chart-group">
      <div class="title">
        <h3>增长分析</h3>
      </div>
      <div class="charts">
        <el-row>
          <el-button type="primary" size="small" @click="changeChartData(1)">近7天数据统计</el-button>
          <el-button type="primary" size="small" @click="changeChartData(2)">近7月数据统计</el-button>
          <el-button type="primary" size="small" @click="changeChartData(3)">近7年数据统计</el-button>
        </el-row>
        <el-row>
          <el-button type="success" size="small" @click="changeChartType('line')">折线图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('histogram')">柱状图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('bar')">条形图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('pie')">饼图统计</el-button>
        </el-row>
        <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
      </div>
    </div>

  </el-container>

</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getUserStatistic({}).then(function (res) {
        if (res.code == 1) {
          _this.data = res.data;
        }
      }).catch(function (error) {
        throw new Error(error);
      })

      this.api.getUserIncreaseStatistic().then(function (res) {
        if (res.code == 1) {

        _this.allChartData = res.data;
        _this.changeChartData();
        _this.loading = false;
        }
      }).catch(function (error) {
        throw new Error(error);
      })
    },
    data() {
      return {
        loading: true,  // 页面加载
        allChartData: null,
        data:{
          "count":0,                //类型：Number  必有字段  备注：用户总数
          "sex":{                //类型：Object  必有字段  备注：性别
            "male":0,                //类型：Number  必有字段  备注：男
            "female":0                //类型：Number  必有字段  备注：女，未知的自己减一下
          },
          "member_grade":0,                //类型：Number  必有字段  备注：平均用户等级
          "member_grow":0,                //类型：Number  必有字段  备注：平均用户成长值
          "price":0,                //类型：Number  必有字段  备注：总余额
          "phone":0,                //类型：Number  必有字段  备注：绑定手机号数量
          "vip":0,                //类型：Number  必有字段  备注：会员数量
          "per_phone":0,                //类型：Number  必有字段  备注：绑定手机号比例
          "per_male":0,                //类型：Number  必有字段  备注：男性比例
          "per_female":0                //类型：Number  必有字段  备注：女性比例
        },
        chartSettings: {type: "line"},
        chartData: {
          columns: ['当前日期', '增长人数'],
          rows: [
            {'当前日期': '', '增长人数': ""},
          ]
        },  // 图表数据
      }
    },
    methods: {
      /**
       * 修改图表数据
       */
      changeChartData(type = 1) {
        let _this = this;
        if (!_this.allChartData) {
          return false;
        }
        let tempArr = [];
        let dataType = "";
        if (type == 1) {
          dataType = "day";
        } else if (type == 2) {
          dataType = "month";
        } else if (type == 3) {
          dataType = "year";
        }
        _this.allChartData[dataType].forEach(function (item, index) {
          tempArr.push({
            "当前日期": item.date,
            "增长人数": item.count
          });
        })
        _this.chartData.rows = tempArr.reverse();
      },
      /**
       *
       */
      changeChartType(type = "line") {
        this.chartSettings.type = type;
      }
    }
  }
</script>

<style scoped>
  .el-container {
    width: 100%;
    display: block;
  }

  .chart-group {
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    float: left;
  }

  .ve-line {
    width: 95% !important;
    height: 400px !important;
    margin: 0 auto;
  }

  .info-group-block {
    width: 23%;
    display: inline-block;
    margin: 15px 0 15px 1%;
    text-align: center;
    color: #ffffff;
    padding: 20px 15px;
    border-radius: 3px;
  }

  .info-group-block h3, .info-group-block p {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }

  .info-group-block p {
    margin-top: 10px;
    font-size: 16px;
  }

  .info-group-block:nth-child(1) {
    background: #F78068;
  }

  .info-group-block:nth-child(2) {
    background: #65AEDA;
  }

  .info-group-block:nth-child(3) {
    background: #60E69C;
  }

  .info-group-block:nth-child(4) {
    background: #F7B276;
  }

  .chart-group {
    width: 95%;
    box-shadow: 0 0 10px #eee;
    display: inline-block;
    margin: 30px 0 30px 2.5%;
  }

  .chart-group:hover {
    box-shadow: 0 0 10px #ddd;
  }

  .chart-group .title {
    margin: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .chart-group .title h3 {
    font-size: 24px;
  }

  .el-row {
    margin: 0 0 15px 15px;
  }

</style>
